【Day 25】lottie-flutter - 前端動畫的專案

12th鐵人賽 flutter

Jason Hung

2020-10-09 15:21:20

3234 瀏覽

分享至

今日要點
》前言
》介紹 lottie-flutter 專案
》下載並編譯 lottie-flutter 專案
》程式架構研究

前言

前面有介紹Flare 【Day 19】Flare-Flutter - 來點 2D 動畫吧，今天要介紹另一個熱門的前端動畫方案。這是 Android 工程師跟我推薦的，真是教學相長。我又得到新知了。馬上就來研究一下看 flutter 有沒有相關的教學，整理一下筆記。

介紹 lottie-flutter 專案

Lottie是一個由Airbnb開源動畫方案，它以JSON的方式解決了開發者對複雜動畫實現的開發成本問題。 Lottie 是適用於 Android 和 iOS 的 library 也適用於macOS 和 Web。它可以使用 Bodymovin 擴充程式解析 Adobe After Effects動畫導出的 json 格式檔，並在移動設備上進行原生渲染！

今天要介紹的Github專案，lottie-flutter 可以把 lottie 做好的動畫放進你的 Flutter 專案中，並且可以用程式去控制它。xvrh/lottie-flutter 286 的星星。

嗯，他在 README.md 沒有放畫面，沒關係，等一下我們用他的範例專案來看看。

下載並編譯 lottie-flutter 專案

所以我們就來練習編譯一下看看有沒有問題。

那麼我們就開始下載並且建立這個 lottie-flutter 專案囉。

% git clone https://github.com/xvrh/lottie-flutter.git

Cloning into 'lottie-flutter'...
remote: Enumerating objects: 424, done.
remote: Counting objects: 100% (424/424), done.
remote: Compressing objects: 100% (392/392), done.
remote: Total 2748 (delta 97), reused 330 (delta 23), pack-reused 2324
Receiving objects: 100% (2748/2748), 28.00 MiB | 6.32 MiB/s, done.
Resolving deltas: 100% (1181/1181), done.

% cd lottie-flutter/example  
% flutter pub get

Running "flutter pub get" in example... 3.0s

試 build 一下，

% flutter run -d all

ok，一次成功 Android 執行起來了，iOS也OK。

動畫的效果。

程式架構研究

Main.dart : MaterialApp

在 VSCode 的樣子

程式碼很短，那我就貼一下好了，

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView(
          children: [
            // Load a Lottie file from your assets
            Lottie.asset('assets/LottieLogo1.json'),

            // Load a Lottie file from a remote url
            Lottie.network(
                'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json'),

            // Load an animation and its images from a zip file
            Lottie.asset('assets/lottiefiles/angel.zip'),
          ],
        ),
      ),
    );
  }
}

看了程式碼我才發現原來有三個動畫，
分別用三種方式來截入檔案，非常方便的設計，作者很厲害。